<template>
  <transition :name="carouselCurrentPath">
    <div class="fx-carousel-item" ref="carouselItemDom" v-show="showCurrent">
      <slot></slot>
    </div>
  </transition>
</template>

<script lang="ts">
import { computed, defineComponent, inject, Ref, ref } from 'vue'
import { CarouselPath } from '@/base/carousel/carousel.vue'

export default defineComponent({
  name: 'FCarouselItem',
  setup () {
    // 当前索引
    const carouselCurrentIndex = inject<Ref<number> | undefined>('carouselCurrentIndex', undefined)
    // 当前方向
    const carouselCurrentPath = inject<Ref<CarouselPath>>('carouselCurrentPath')
    // itemDom
    const carouselItemDom = ref<HTMLElement>()
    // 是否显示当前
    const showCurrent = computed(() => {
      if (!carouselItemDom.value || !carouselCurrentIndex) return false
      const index = carouselItemDom.value?.getAttribute('index')
      return index === String(carouselCurrentIndex.value)
    })

    return {
      showCurrent,
      carouselItemDom,
      carouselCurrentPath,
      carouselCurrentIndex
    }
  }
})
</script>
